<template>
	<el-dialog v-model="visible" title="修改信息" :close-on-click-modal="false" draggable>
		<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="100px" @keyup.enter="submitHandle()">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="dataForm.name"></el-input>
      </el-form-item>
			<el-form-item label="性别" prop="sex">
        <fast-radio-group v-model="dataForm.sex" dict-type="user_gender"></fast-radio-group>
			</el-form-item>
      <el-form-item label="民族" prop="group">
        <el-input v-model="dataForm.group"></el-input>
			</el-form-item>
      <el-form-item label="籍贯" prop="origin">
        <el-input v-model="dataForm.origin"></el-input>
			</el-form-item>
      <el-form-item label="身份证号码" prop="idNumber">
        <el-input v-model="dataForm.idNumber"></el-input>
			</el-form-item>
      <el-form-item label="出生年月日" prop="birthTime">
        <el-date-picker
            v-model="dataForm.birthTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="出生年月日"
        />
			</el-form-item>
      <el-form-item label="居住地址" prop="address">
        <el-input v-model="dataForm.address"></el-input>
			</el-form-item>
      <el-form-item label="政治面貌" prop="politicalAspects">
        <el-input v-model="dataForm.politicalAspects"></el-input>
			</el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="dataForm.phone"></el-input>
			</el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="dataForm.email"></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="submitHandle()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus/es'
import {useSpeSelectApi} from "@/api/college/spe";
import {useClassSubmitApi} from "@/api/college/class";
import {useTeacherListApi, useTeacherSubmitApi} from "@/api/college/teacher";
import FastRadioGroup from "@/components/fast-radio-group/src/fast-radio-group.vue";

const emit = defineEmits(['refreshDataList'])

const visible = ref(false)
const dataFormRef = ref()
const speList = ref<any[]>([])
const teacherList = ref<any[]>([])

const dataForm = reactive({
	id: '',
  name: "",
  sex: "",
  idNumber: "",
  group: "",
  origin: "",
  birthTime: "",
  address: "",
  politicalAspects: "",
  phone: "",
  email: "",
  academyId: "",
  code: ""
})

const init = (data: any) => {
	visible.value = true
	dataForm.id = ''
  dataFormRef.value?.resetFields()
	// 存在则为修改
	if (data?.id) {
    Object.assign(dataForm, data)
	}
  getSpeList()
  getTeacherList()
}

const dataRules = ref({
  name: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
  sex: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
  group: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
  idNumber: [{ required: true, message: '必填项不能为空', trigger: 'blur' }],
  origin: { required: true, message: '必填项不能为空', trigger: 'blur' },
  birthTime: { required: true, message: '必填项不能为空', trigger: 'blur' },
  address: { required: true, message: '必填项不能为空', trigger: 'blur' },
  politicalAspects: { required: true, message: '必填项不能为空', trigger: 'blur' },
  phone: [{ required: true, message: '必填项不能为空', trigger: 'blur' },
    {required: true, pattern: /^1[3456789]\d{9}$/, message: '请输入11位有效手机号号码', trigger: 'change'}],
  email: { required: true, message: '必填项不能为空', trigger: 'blur' },
})

function getSpeList(){
  useSpeSelectApi().then(res=>{
    speList.value = res.data
  })
}
function getTeacherList(){
  useTeacherListApi().then(res=>{
    teacherList.value = res.data
  })
}
// 表单提交
const submitHandle = () => {
	dataFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}
    useTeacherSubmitApi(dataForm).then(() => {
			ElMessage.success({
				message: '操作成功',
				duration: 500,
				onClose: () => {
					visible.value = false
					emit('refreshDataList')
				}
			})
		})
	})
}

defineExpose({
	init
})
</script>
